<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1200px">
			<el-form ref="formRef" :model="state.ruleForm" :rules="state.rules">
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="供应商名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入供应商名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="供应商类型" prop="type">
							<el-select v-model="state.ruleForm.type" placeholder="请选择供应商类型" clearable>
								<el-option label="个人" :value="1" />
								<el-option label="个体户" :value="2" />
								<el-option label="企业" :value="3" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="供应商联系人" prop="contact_name">
							<el-input v-model="state.ruleForm.contact_name" placeholder="请输入供应商联系人" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="供应商联系电话" prop="contact_mobile">
							<el-input v-model="state.ruleForm.contact_mobile" placeholder="请输入供应商联系电话" clearable />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="登录账号" prop="username">
							<el-input
								v-model="state.ruleForm.username"
								placeholder="请输入账号"
								clearable
								@input="onVerifyCnAndSpaceUsername"
								:disabled="state.dialog.type === 'add' ? false : true"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="登录密码" :prop="state.dialog.type === 'edit' ? '' : 'password'">
							<el-input
								v-model="state.ruleForm.password"
								:type="state.isShowPassword ? 'text' : 'password'"
								placeholder="请输入登录密码"
								clearable
								@input="onVerifyCnAndSpacePassword"
								autocomplete="new-password"
							>
								<template #suffix>
									<i
										class="iconfont el-input__icon login-content-password"
										:class="state.isShowPassword ? 'icon-xianshimima' : 'icon-yincangmima'"
										@click="state.isShowPassword = !state.isShowPassword"
									>
									</i>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="收款人" prop="bank_user_name">
							<el-input v-model="state.ruleForm.bank_user_name" placeholder="请输入收款人" clearable />
						</el-form-item>
						<el-form-item label="开户行" prop="bank_name">
							<el-input v-model="state.ruleForm.bank_name" placeholder="请输入开户行" clearable />
						</el-form-item>
						<el-form-item label="收款卡号" prop="bank_card">
							<el-input v-model="state.ruleForm.bank_card" placeholder="请输入收款卡号" clearable @input="onVerifiyNumberIntegerBankCard" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="remarks">
							<el-input v-model="state.ruleForm.remarks" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" placeholder="请输入备注" clearable />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="图片信息" prop="images">
							<ImageUploadCOS v-model="state.ruleForm.images" path="supplier/images" :limit="6" :is-dialog-upload="state.dialog.isShowDialog" />
						</el-form-item>
					</el-col>
				</el-row>
				<!-- <el-row class="mb20" :gutter="20">
					<el-col :span="12">
						<el-form-item label="供应商状态" prop="status">
							<el-radio-group v-model="state.ruleForm.status">
								<el-radio :value="1">启用</el-radio>
								<el-radio :value="0">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row> -->
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';
import { supplierApi } from '/@/api';
import { verifyCnAndSpace, verifyPhone, verifiyNumberInteger } from '/@/utils/toolsValidate';

let callback: Function = () => {};
const SupplierApi = supplierApi();
const validatePersonContactMobile = (rule: any, value: string, callback: any) => {
	if (verifyPhone(value)) {
		callback();
	} else {
		callback(new Error('联系电话格式错误'));
	}
};
// 定义变量内容
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		supplier_id: '',
		name: '',
		type: '',
		contact_name: '',
		contact_mobile: '',
		bank_user_name: '',
		bank_name: '',
		bank_card: '',
		username: '',
		password: '',
		remarks: '',
		images: '',
		status: 1,
	},
	rules: {
		name: [{ required: true, message: '供应商名称不能为空', trigger: ['blur'] }],
		type: [{ required: true, message: '供应商类型不能为空', trigger: ['blur','change'] }],
		contact_name: [{ required: true, message: '供应商联系人不能为空', trigger: ['blur'] }],
		contact_mobile: [
			{ required: true, message: '供应商联系电话不能为空', trigger: ['blur'] },
			{ required: true, validator: validatePersonContactMobile, trigger: ['blur'] },
		],
		bank_user_name: [{ required: true, message: '收款人不能为空', trigger: ['blur'] }],
		bank_name: [{ required: true, message: '开户行不能为空', trigger: ['blur'] }],
		bank_card: [{ required: true, message: '收款卡号不能为空', trigger: ['blur'] }],
		username: [{ required: true, message: '登录账号不能为空', trigger: ['blur'] }],
		password: [{ required: true, message: '登录密码不能为空', trigger: ['blur'] }],
		images: [{ required: true, message: '图片信息不能为空', trigger: ['blur', 'change'] }],
	},
	isShowPassword: false,
});
const formRef = ref();

/********** 触发事件 **********/
// 登陆账户过滤
const onVerifyCnAndSpaceUsername = (val: string) => {
	state.ruleForm.username = verifyCnAndSpace(val);
};
// 登陆密码过滤
const onVerifyCnAndSpacePassword = (val: string) => {
	state.ruleForm.password = verifyCnAndSpace(val);
};
// 收款卡号过滤
const onVerifiyNumberIntegerBankCard = (val: string) => {
	state.ruleForm.bank_card = verifiyNumberInteger(val);
};
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		state.dialog.submitLoading = true;
		if (state.dialog.type === 'add') {
			_supplierAdd(state.ruleForm);
		} else {
			_supplierEdit(state.ruleForm);
		}
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (data: any, row: any, fn: Function) => {
	state.dialog = {
		isShowDialog: true,
		type: data.type,
		title: data.title,
		submitLoading: false,
	};
	callback = fn;
	nextTick(() => {
		formRef.value.resetFields();
		if (state.dialog.type !== 'add') {
			_supplierInfo({ supplier_id: row.id });
		}
	});
};

/********** 网络请求 **********/
// 获取供应商信息
const _supplierInfo = (params: Object) => {
	SupplierApi.supplierInfo(params)
		.then((res) => {
			state.ruleForm = {
				...res.data.info,
				supplier_id: res.data.info.id,
				username: res.data.info.admin_info.username,
			};
		})
		.catch(() => {});
};
// 添加供应商
const _supplierAdd = (params: Object) => {
	SupplierApi.supplierAdd(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};
// 编辑供应商
const _supplierEdit = (params: Object) => {
	SupplierApi.supplierEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
